﻿@model ViewModels.Shared.ICaptchaModel

<span zyf-img-code>
	<input asp-for="Captcha" zyf-captcha-input autocomplete="off" maxlength="4"
		class="form-control" placeholder="直接点击" 
		style="width:90px; display: inline;" >
	<img zyf-image-code style="vertical-align: middle; display: none;" />
	<a name="imageCode" />
	<a href="#" zyf-refresh-image-code style="font-size: 12px; display: none">
		看不清楚
	</a>
	<span zyf-image-code-reminder>点击输入框显示</span>
	<br />
	<span asp-validation-for="Captcha"></span>
</span>

<script type="text/javascript">
	$(document).ready(function () {
		$("[zyf-captcha-input]").focus(function (event) {
			//TODO：试图避开同时刷新多个captcha，但没有用，但也无大碍？
			//var $image = $(this).parents('form').find("[zyf-image-code]");
			var $image = $("[zyf-image-code]");
			if ($image.is(":not([src])")) {
				initCaptcha();
				$("[zyf-refresh-image-code]").show();
				$("[zyf-image-code-reminder]").hide();
			}
		});

		$("[zyf-refresh-image-code]").click(function (event) {
			event.preventDefault();
			initCaptcha();
		});
	})

	function initImageCode(clearInputImageCode) {
		if (clearInputImageCode) {
			$("#captcha").val('');
		}
		$("[zyf-image-code]").removeAttr("src").hide();
		$("[zyf-refresh-image-code]").hide();
		$("[zyf-image-code-reminder]").show();
	}

	function initCaptcha(keepInput) {
		$("[zyf-image-code]")
			.attr("src", "/api/Captcha/Get?NumKey=" + Math.random())
			.show();
		if (!keepInput) {
			clearInput();
		}
	}

	function clearInput() {
		$("#captcha").val("");
	}
</script>
